// 引入依赖（确保在页面中已加载 vuedraggable 和 Vant 组件库）
Vue.component('home-page', {
	// 使用模板字符串替代反斜杠，保留换行和缩进
	template: `
	  <div class="home_box">
		<!-- 导航栏 -->
		<div class="header_tit">
		  <van-nav-bar title="AI助手" left-arrow>
			<template #left>
			  <div class="back_l" @click="close">
				<img src="../image/left.png" alt="返回" />
			  </div>
			</template>
			<template #right>
			  <div class="back_r tag-read" @click="search" style="width: 0.42rem; height: 0.42rem">
				<img src="../image/search.png" alt="" style="width: 100%; height: 100%" />
			  </div>
			  <div class="back_r" @click="showBtn" style="width: 0.42rem; height: 0.42rem">
				<img src="../image/site.png" alt="" style="width: 100%; height: 100%" />
			  </div>
			</template>
		  </van-nav-bar>
		</div>
  
		<!-- 可拖拽卡片视图（v-if 控制显示） -->
		<div class="card_home" v-if="showCard">
		  <div class="card_box">
			<draggable 
			  v-model="cardList" 
			  handle=".card_name" 
			  :options="{ delay: 1000, animation: 200 }" 
			  :disabled="disabledDra"
			>
			  <div 
				class="card_list" 
				:style="{ backgroundImage: \`url(\${item.img2})\` }"  
				v-for="(item, index) in cardList" 
				:key="index"
				@click="funcken(item)"
			  >
				<div 
				  class="overlay" 
				  :style="{ display: active === item.url ? 'block' : 'none' }" 
				></div>
				<div class="cardImg">
				  <img oncontextmenu="return false"  :src="item.img1" alt="" />
				</div>
				<div class="card_r">
				  <div class="card_name">
					<p v-text="item.title"></p>
					<p v-text="item.text"></p>
				  </div>
				  <p class="text_box" :style="\`color:\${item.color}\`">
					<span 
					  v-for="(i, iIdx) in item.children" 
					  :key="iIdx"
					  v-if="i.text !== '票据识别'"
					  v-text="i.text"
					></span>
				  </p>
				</div>
			  </div>
			</draggable>
		  </div>
		</div>
  
		<!-- 瀑布流视图（v-if 控制显示） -->
		<div class="home_card" v-if="!showCard">
		  <div class="m-waterfall-wrap">
			<div 
			  class="waterfall-side"   
			  v-for="(arr, ind) in cardArr" 
			  :key="ind"
			>
			  <div 
				class="m-img" 
				:style="\`background: linear-gradient(to right, \${item.color1}, \${item.color2});\`"  
				v-for="(item, index) in arr" 
				:key="index"
				@click="funcken(item)"
			  >
				<div 
				  class="overlay" 
				  :style="{ display: active === item.url ? 'block' : 'none' }" 
				></div>
				<div class="card_title">
				  <div class="title_top">
					<span :style="\`background:\${item.color}\`"></span>
					<span v-text="item.title"></span>
				  </div>
				  <p v-text="item.text"></p>
				</div>
				<div class="card_img">
				  <img oncontextmenu="return false"  class="u-img" :src="item.img" alt="" />
				</div>
				<div class="card_b">
				  <p 
					:style="\`color:\${item.color}\`" 
					v-for="(i, iIdx) in item.children" 
					:key="iIdx"
					v-if="item.show"
					v-text="i.text"
				  ></p>
				</div>
			  </div>
			</div>
		  </div>
		</div>
	  </div>
	`,
  
	data() {
		return {
		disabledDra:true,
		     cardList: JSON.parse(sessionStorage.getItem("menus")),
			// cardList:[
			// 	{
			// 		color: "#4893de",
			// 		color1: "#dde9ff",
			// 		color2: "#cbdcff",
			// 		title: "智能写作",
			// 		text: 'AI公文写作工具',
			// 		img: '../image/xyx.png',
			// 		img1: '../image/xyx1.png',
			// 		img2: '../image/xyx2.png',
			// 		url: 'yr/write/index.html',
			// 		show:true,
			// 		children: [{
			// 			text: "工作方案"
			// 		}, {
			// 			text: "工作总结"
			// 		}, {
			// 			text: "会议通知"
			// 		}, ]
			// 	},{
			// 		color: "#4c7de9",
			// 		color1: "#ebf1ff",
			// 		color2: "#ced6ff",
			// 		title: "会议助手",
			// 		text: "语音转换，生成纪要",
			// 		img: '../image/huiyi.png',
			// 		img1: '../image/huiyi1.png',
			// 		img2: '../image/huiyi2.png',
			// 		url: 'hyzs.html',
			// 		show:false,
			// 		children: [{
			// 			text: "纪要生成"
			// 		}, ]
			// 	}, {
			// 		color: "#f09641",
			// 		color1: "#fef1c7",
			// 		color2: "#f9e2a9",
			// 		title: "转一转",
			// 		text: '文档格式转换',
			// 		url: 'yr/transfer/index.html',
			// 		img: '../image/zyz.png',
			// 		img1: '../image/zyz1.png',
			// 		img2: '../image/zyz2.png',
			// 		show:true,
			// 		children: [{
			// 			text: "PDF与WORD互转"
			// 		}, {
			// 			text: "WORD与OFD互转"
			// 		}, ]
			// 	},
			// 	{
			// 		color: "#62CCCC",
			// 		color1: "#d6faf6",
			// 		color2: "#b2f0f9",
			// 		title: "智能翻译",
			// 		text: '实时会话翻译',
			// 		url: 'translationPage.html',
			// 		img: '../image/fanyi.png',
			// 		img1: '../image/fanyi1.png',
			// 		img2: '../image/fanyi2.png',
			// 		show:true,
			// 		children: [{
			// 			text: "实时翻译"
			// 		}, {
			// 			text: "会议翻译"
			// 		}, ]
			// 	},
			// 	{
			// 		color: "#13C09B",
			// 		color1: "#dff9e0",
			// 		color2: "#c6f8de",
			// 		title: "智能会议",
			// 		text: "语音转文字，生成纪要",
			// 		img: '../image/lyl.png',
			// 		img1: '../image/lyl1.png',
			// 		img2: '../image/lyl2.png',
			// 		url: 'voiceRecordingList.html',
			// 		show:true,
			// 		children: [{
			// 			text: "实时语音转写"
			// 		}, {
			// 			text: "语音发送内网"
			// 		}, ]
			// 	},{
			// 		color: "#624BFE",
			// 		color1: "#eeedff",
			// 		color2: "#e4daff",
			// 		title: "随手记",
			// 		text: '高效记录各种信息并发内网',
			// 		img: '../image/sys.png',
			// 		img1: '../image/sys1.png',
			// 		img2: '../image/sys2.png',
			// 		url: 'textTransmission.html',
			// 		show:false,
			// 		children: [{
			// 			text: "即时记录"
			// 		}, ]
			// 	}, 
			// 	 {
			// 		color: "#5F84F7",
			// 		color1: "#e7f3ff",
			// 		color2: "#d1e3ff",
			// 		title: "识一识",
			// 		text: '文字、表格、票证识别',
			// 		img: '../image/shiyishi.png',
			// 		img1: '../image/shiyishi1.png',
			// 		img2: '../image/shiyishi2.png',
			// 		url: 'OCR.html',
			// 		show:true,
			// 		children: [{
			// 			text: "打印文字识别"
			// 		}, {
			// 			text: "表格识别"
			// 		}, {
			// 			text: "证件识别"
			// 		},{
			// 			text: "票据识别"
			// 		}]
			// 	}, {
			// 		color: "#50A7F4",
			// 		color1: "#d5f6ff",
			// 		color2: "#c7f3ff",
			// 		title: "拍一拍",
			// 		text: '随手拍并发邮件',
			// 		img: '../image/pyp.png',
			// 		url: 'PicTransmission.html',
			// 		img1: '../image/pyp1.png',
			// 		img2: '../image/pyp2.png',
			// 		show:true,
			// 		children: [{
			// 			text: "图片添坐标"
			// 		}, {
			// 			text: "图片添水印"
			// 		}, ]
			// 	},
			// 	{
			// 		id:11,
			// 		color: "#ff0000",
			// 		color1: "#fbe8dc",
			// 		color2: "#ffcccc",
			// 		title: "党建会议助手",
			// 		text: '助力党建工作高效开展',
			// 		img: '../image/dj.png',
			// 		url: 'zipapp://appid:1003505/common/inInt.html?path=/common/yr/meeting/index.html',
			// 		img1: '../image/dj1.png',
			// 		img2: '../image/dj2.png',
			// 		show:false,
			// 		children: [{
			// 			text: "实时录音"
			// 		}, {
			// 			text: "上传录音文件"
			// 		}, ]
			// 	},
			// 	{id:13,
			// 		color: "#28a8ff",
			// 		color1: "#fbe8dc",
			// 		color2: "#ffcccc",
			// 		title: "语音助手",
			// 		text: '语音指令直达i国网各个应用',
			// 		img: '../image/dj.png',
			// 		url: 'yr/routeApp/index.html',
			// 		img1: '../image/yyzs1.png',
			// 		img2: '../image/yyzs2.png',
			// 		show:false,
			// 		children: [{
			// 			text: "语音直达"
			// 		},]
			// 	},
			// 	{
			// 		color: "#ddb941",
			// 		color1: "#feefc6",
			// 		color2: "#ffe2b4",
			// 		title: "PPT辅助生成",
			// 		url: 'yr/ppt/index.html',
			// 		text: 'PPT辅助生成',
			// 		img: '../image/PPT.png',
			// 		img1: '../image/PPT1.png',
			// 		img2: '../image/PPT2.png',
			// 		show:false,
			// 		children: [{
			// 			text: "WORD转PPT"
			// 		}, {
			// 			text: "主题生成PPT"
			// 		}, ]
			// 	},
			// {
			// 	color: "#73ce8f",
			// 	color1: "#e3f8f9",
			// 	color2: "#baebe3",
			// 	title: "证件照优化",
			// 	text: '打造专业证件照',
			// 	url: 'yr/idphoto/index.html',
			// 	img: '../image/zjz.png',
			// 	img1: '../image/zjz1.png',
			// 	img2: '../image/zjz2.png',
			// 	show:false,
			// 	children: [{
			// 		text: "证件照"
			// 	}, ]
			// },
			
			
			// ],
            active:'',
			initLoading: true,
			showCard: sessionStorage.getItem("showCard") == 'false' ? false : true,
		}
	},
	watch:{
		cardList:{
			handler(newVal,oldVal){
				console.log(newVal,89898989)
			},
		}
	},
	components: {
		draggable: vuedraggable
	},
	created() {
		console.log(888)
		// if(sessionStorage.getItem("menus")) {
		// 	JSON.parse(sessionStorage.getItem("menus")).forEach(item=>{
		// 	 if(item.show == true) {
		// 		this.cardList.push(item)
		// 	 }
		// })
		// }
		
	},
	computed: {
		cardArr() {
			const arr = this.cardList
			let leftbtns = 0
			let rightbtns = 0
			const leftArr = []
			const rightArr = []
			arr.forEach(item => {
				item.btns = (item.children && item.children.length) || 0
				item.btns+=3.65
				if (rightbtns < leftbtns) {
					rightbtns += item.btns
					rightArr.push(item)
				} else {
					leftbtns += item.btns
					leftArr.push(item)
				}
			})
			return [
				leftArr,
				rightArr
			]
		}
	},
	methods: {
	
        search(){
            $(location).attr("href", "search.html");
        },
		showBtn() {
			$(location).attr("href", "site.html");
			// this.showCard = !this.showCard
			// sessionStorage.setItem("showCard", this.showCard)
		},
		gotoApp(agentId, url) {
			console.log('gotoApp', agentId, url)
			wx.invoke("multiWindows_startWidget", {
				agentId: agentId, //需要打开的应用在企信应用管理端对应的agentId
				window: {
					//窗口数据，样式等定制数据
					windowId: 'windowId',  //windowId对应一个窗口，全局唯一
					url: url,// 跳到指定url页面，不填默认index.html 
					// openType: 0, //0: url，1：本地路径
					showAppBar: 'false' //是否显示appBar
				},
			}, (res) => {
				if(res.err_msg != "multiWindows_startWidget:ok") {
					// __gap.showMsg('您暂无访问权限，请联系i国网客服');
					mui.toast("您暂无访问权限，请联系i国网客服", {
						duration: 'long',
						type: 'div'
					})
				}
				console.log("拉起离线应用回调", res)
			})
		},
		funcken(item) {
			console.log(item,888)
			this.active = item.url
			if(item.id == 11 || item.id == 13) {
				var URl = item.id == 11 ? "zipapp://appid:1002818/common/inInt.html?path=/common/yr/meeting/index.html" : 'zipapp://appid:1002818/common/inInt.html?path=/common/yr/routeApp/index.html'
				this.gotoApp("1002818", URl)
			} else {
				$(location).attr("href", item.url);
			}
			
		},
		close() {
				if (!isFlag) {
					closeIscp();
				}
				IscLogout()
				wx.closeWindow();

		},

	}
});